<template>
  <div id="travelIndex" ref="container">
    <div class="personal">
      <div v-if="isBgFlag" style="height: 71px; clear: both;"></div>
      <van-sticky :container="container" :offset-top="0"  @scroll="headSitcky" :class="isBgFlag ? 'Haderfixed' : ''">
        <!--  :style="'background-color:' + 'var(--themeBaseColor)'" -->
        <div class="head-city flex-j-sb" :style="isBgFlag ? { backgroundColor: 'var(--themeBaseColor)' ,transition: '0.5s'} :''">
          <div class="left flex-a-c" @click.stop="cityNavOn">
            <span class="iconfont icon-service_n"></span>
            <span class="address">{{ addressCity || "全国" }}</span>
            <span class="iconfont icon-member-bottom"></span>
          </div>
          <div class="right">
            <div class="classify-search  flex-j-sb">
              <div class="search-left" @click="searchOn">
                <input placeholder="" v-model="query.title" />
                <!-- <div class="iconfont icon-sousuo1"></div> -->
                <div class="search-btn">搜索</div>
              </div>
            </div>
          </div>
        </div>
      </van-sticky>
      <!-- <div class="mb13"></div> -->
      <div class="travel-banner flex" v-if="indexBanner.length">
        <swiper :options="swiperOption" >
          <swiper-slide v-for="(item, index) in indexBanner" :key="index">
            <img :src="item.image_url" @click="swiperNav(item.h5_url)" />
          </swiper-slide>
        </swiper>
      </div>
      <div class="activity-list " >
        <div  ref="handpickList" class="content flex" style="overflow: hidden;">
          <ul class="flex activity-scroll flex-a-c " :class="classifyList.length > 0 ? 'activity-10' : ''">
            <li class="activity-item flex felx-j-c" v-for="(item, index) in activityList" :key="index" @click="classifyOn(item.id)">
              <img :src="item.thumb_url" />
              <h3 class="ell">{{ item.name }}</h3>
            </li>
          </ul>
        </div>

        <ul class="flex activity-scroll flex-a-c" v-if="classifyList.length > 0">
          <div  ref="classifyRef" class="content flex" style="overflow: hidden;">
            <li class="activity-item flex felx-j-c" v-for="(item, index) in classifyList" :key="index" @click="classifyOn(index)">
              <img :src="item.thumb_url" />
              <h3 class="ell">{{ item.name }}</h3>
            </li>
          </div>
        </ul>
      </div>
    </div>

    <div class="ranking-list">
      <div class="header flex-j-sb" @click="rankingNav">
        <h3>排行榜</h3>
        <div class="iconfont icon-advertise-next"></div>
      </div>
      <div class="wrap flex-j-sb">
        <div class="wrap-goods" v-for="(item, index) in rankingList" :key="index" @click="rankingOn(item.id)">
          <div class="number">TOP{{ index + 1 }}</div>
          <img :src="item.thumb" />
          <div class="title pl">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <van-sticky :offset-top="51" @change="subscribeSticky" :container="container">
      <div :class="subscribeFlag || makeOpen || addressOpen ? 'menu-bg' : ''">
        <div id="subscribe" :class="subscribeFlag ? 'subscribe active-subscribe' : 'subscribe'">
          <div class="filter-list flex-j-sb "  >
            <div class="filter-item flex-a-c" @click.stop="addMenuOpen"  v-if="addressList.length > 0" :class="subscribeIndex === 4 ? 'subscribe-bg' : subscribeFlag ? 'active-subscribe-box' : ''">
              <h3>{{ cityText }}</h3>
              <h4 class="iconfont icon-member-bottom"></h4>
            </div>
            <div class="filter-item flex-a-c" :class="subscribeIndex === 3 ? 'subscribe-bg' : subscribeFlag ? 'active-subscribe-box' : ''" @click.stop="subscribeOn(3)" >
              <h3>{{ subscribeText }}</h3>
              <h4 class="iconfont icon-member-bottom"></h4>
            </div>
            <div class="filter-item flex-a-c" :class="subscribeIndex === 1 ? 'subscribe-bg' : subscribeFlag ? 'active-subscribe-box' : ''"  @click.stop="subscribeOn(1)" >
              <h3>爆品推荐</h3>

            </div>
            <div class="filter-item flex-a-c" :class="subscribeIndex === 2 ? 'subscribe-bg' : subscribeFlag ? 'active-subscribe-box' : ''" @click.stop="subscribeOn(2)" >
              <h3>离我最近</h3>
            </div>
          </div>
          <div class="subscribe-menu" v-show="makeOpen">
            <div class="subscribe-make flex-j-sb" @click.stop="subscribeOption(1, '无需预约')">
              <div class="left">无需预约</div>
              <div class="iconfont icon-all_select_active " :class="optionIndex === 1 ? 'on' : ''"></div>
            </div>
            <div class="mb10"></div>
            <div class="subscribe-make flex-j-sb" @click.stop="subscribeOption(2, '即将下架')">
              <div class="left">即将下架</div>
              <div class="iconfont icon-all_select_active" :class="optionIndex === 2 ? 'on' : ''"></div>
            </div>
          </div>
        </div>
        <div class="select-address" v-if="addressList.length > 0" id="selectAddress" :class="makeOpen ? 'addressConceal' : 'addressopen'">
          <div>
            <ul class="address-list " :class="addressOpen ? subscribeFlag ? 'active-address-list toggle' : 'toggle': ''" ref="addressUl">

              <block v-for="(item, index) in addressList" :key="index">
                <li ref="addressLi" :class="addIndex === index ? 'on' : ''" @click.stop="toAddress(index, item.city)">{{ item.city }}</li>
              </block>
              <div style="clear: both;"></div>
            </ul>
          </div>
        </div>
      </div>
    </van-sticky>

    <div class="commodity-list" v-if="goodsList.length > 0">
      <div class="commodity-items" v-for="(item, index) in goodsList" :key="index" @click="commodityNav(item.id)">
        <div class="container flex">
          <div class="image">
            <img :src="item.thumb" />
            <div class="img-footer flex-j-sb flex-a-c">
              <div class="flex">
                <div class="distance" v-if="locationMore && item.distance != 0">
                  <span class="iconfont icon-service_n"></span>
                  <span>{{ item.distance | kmUnit }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="img-right flex">
            <div class="title">
              {{ item.title }}
            </div>
            <p class="address">{{item.has_one_yz_travel_around_shop_address && item.has_one_yz_travel_around_shop_address.name}}</p>
            <div class="price-item flex-j-sb">
              <div class="pirce flex">
                <div class="pirce-const flex">
                  <span>￥</span>
                  <p>{{ item.price }}</p>
                </div>
                <div class="counter-price flex">
                  <span>￥</span>
                  <p>{{ item.market_price }}</p>
                </div>
              </div>
              <div class="sales">销量{{ item.show_sales }}</div>
            </div>
          </div>
        </div>
        <div class="footer-comm flex-a-c">
            <div>
              <span class="goods-desc ell">
                <span class="time-end" v-if="computingTime(presentTime, item.endTime)">活动结束</span>
                <div  v-else-if="points(item.endTime)" style="display: inline-block;">
                  <div  class="time-end">
                    <van-count-down :time="beforeDay(item.endTime)" format="HH 时 mm 分 ss 秒" />
                  </div>
                  <div style="display: inline-block;">
                    <div class="time-end">即将下架</div>
                  </div>
                </div>
                <span class="panic" v-else>抢购中</span>
                {{item.long_title}}
              </span>
            </div>
        </div>
      </div>
    </div>
    <van-empty description="空空如也" v-else-if="goodsFlag && goodsList.length === 0" />
    <van-empty description="加载中" v-else />
    <div class="masking" @touchmove.prevent :class="makeOpen ? 'maskBoxBg' : ''" @click.stop="maskOn"></div>
    <div class="masking" @touchmove.prevent :class="addressOpen ? 'maskBoxBg' : ''" @click.stop="maskOn"></div>
    <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>

    <div class="service flex-a-c flex-j-c" @click="getGood">
      <div class="iconfont icon-custom-service"></div>
    </div>
  </div>
</template>
<script>
import travelIndex_controller from "./travelIndex_controller";

export default travelIndex_controller;
</script>
<style scoped>
.commodity-items ::v-deep .van-count-down {
  color: #fff;
  font-size: 0.625rem;
  line-height: 0.625rem;
}
</style>
<style lang="scss" scoped>
#travelIndex {
  background-color: #f7f8fb;
}

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.Haderfixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
}

.pcStyle .Haderfixed {
  max-width: 23.4375rem;
  margin: 0 auto;
  // left:50%;
}

.mb13 {
  height: 0.8125rem;
  clear: both;
}

.mb10 {
  height: 0.625rem;
  clear: both;
}

.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.classify-search {
  position: relative;
  // margin: 0 0.9375rem 0 1.0625rem;
  .search-left {
    position: relative;

    input {
      width: 11.25rem;
      padding-left: 0.625rem;
      height: 1.875rem;
      background: #fff;
      border: 0.0625rem solid #fff;
      border-radius: 0.9375rem;
      position: relative;
    }

    .search-btn {
      font-size: 0.6875rem;
      font-weight: 400;
      color: #fff;
      padding: 0.3125rem 0.75rem;
      border-radius: 0.75rem;
      background-color: var(--themeBaseColor);
      position: absolute;
      top: 0.1875rem;
      right: 0.25rem;
    }

    .icon-sousuo1 {
      color: var(--themeBaseColor);
      position: absolute;
      top: 0.375rem;
      left: 1rem;
    }
  }
}

.activityWrap {
  flex-wrap: wrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.service {
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 50%;
  position: fixed;
  right: 0.9375rem;
  top: 50%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);

  .icon-custom-service {
    line-height: 1.125rem;
    font-size: 1.125rem;
    color: var(--themeBaseColor);
  }
}

#travelIndex {
  // padding: 0 0.625rem;
  // background-image: linear-gradient(#ffc11e, #f5f5f5);
  // background-image: var(--themeBgColor);
  .personal {
    padding: 0 0 0.625rem 0;
    background-image: linear-gradient(#ffc11e, #f7f8fb);
    background-image: var(--themeBgColor);

    .head-city {
      font-size: 0.8125rem;
      color: #333;
      padding: 0.8125rem 0.625rem;

      .left {
        color: white;

        .address {
          margin: 0 0.375rem 0 0.1875rem;
          font-size: 0.8125rem;
          color: white;
          line-height: 1.5rem;
        }

        .icon-service_n {
          font-size: 1rem;
        }
      }
    }

    .travel-banner {
      // width: 22.1875rem;
      max-width: 22.1875rem;
      margin: 0 0.625rem;
      margin-top: 0.875rem;

      img {
        max-width: 22.1875rem;
        border-radius: 0.3125rem;
      }
    }
  }

  .activity-list {
    // height: 7.25rem;
    // overflow: auto;
    // width: 22.1875rem;
    // width: 20.625rem;
    background-color: #fff;
    margin: 0 0.625rem 0 0.625rem;
    border-radius: 0.3125rem;
    padding: 0.75rem 0.8125rem 0.75rem 0.75rem;

    .activity-scroll {
      // height: 7.25rem;
      // width: 20.625rem;
      width: auto;
      // overflow-x: scroll;
      // overflow: hidden;
      // position: relative;
      align-items: flex-start;
      // display: inline-block;

      .activity-item {
        flex-direction: column;
        // width:20%;
        padding-right: 1.4375rem;
        // flex: 0 0 20%;
        cursor: pointer;
        white-space: nowrap;

        img {
          width: 2.5rem;
          height: 2.5rem;
          margin-bottom: 0.625rem;
        }

        h3 {
          font-size: 0.75rem;
          color: #212121;
          text-align: center;
        }
      }
    }
  }

  .ranking-list {
    background: #fff;
    border-radius: 0.3125rem;
    margin: 0 0.625rem 0 0.625rem;
    padding: 0.8125rem;

    .header {
      font-size: 0.9375rem;
      cursor: pointer;

      h3 {
        font-weight: 500;
        color: #f96400;
      }

      .icon-advertise-next {
        font-size: 1.125rem;
      }

      margin-bottom: 0.9375rem;
    }

    .wrap {
      .wrap-goods {
        width: 6.4375rem;
        height: 4.0625rem;
        position: relative;

        .number {
          background: #ea1d1d;
          border-radius: 0.3125rem 0 0.3125rem 0;
          padding: 0.125rem 0.5rem;
          color: #fff;
          font-size: 0.625rem;
          position: absolute;
          left: 0;
          top: 0;
        }

        img {
          width: 6.4375rem;
          height: 4.0625rem;
          background: #282828;
          border-radius: 0.3125rem;
          z-index: 3;
        }

        .title {
          width: 100%;
          font-size: 0.625rem;
          color: #fff;
          text-align: left;
          padding: 0.125rem 0 0.125rem 0.4375rem;
          border-radius: 0 0 0.3125rem 0.3125rem;
          background-color: rgba(0, 0, 0, 0.5);
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }
  }

  .active-subscribe {
    padding: 0 !important;
  }

  .filter-list {
    margin: 0.625rem;
    border-radius: 0.3125rem;
    padding: 0.6875rem 0.875rem 0.625rem 0.3125rem;
    background-color: #fff;

    .filter-item {
      padding: 0.25rem 0.5rem;
    }

    h3 {
      font-weight: 100;
      font-size: 12px;
      color: #363636;
    }

    .icon-member-bottom {
      font-size: 0.75rem;
      padding-left: 0.3125rem;
    }
  }

  .subscribe {
    // padding: 1.125rem 0.625rem;
    // background-color: #f5f5f5;
    position: relative;
    z-index: 99;

    .subscribe-menu {
      width: 100%;
      transition: all 0.6s;
      position: absolute;
      top: 55px;
      left: 0;
      z-index: 100;
      background: #f5f7fc;
      padding: 1.25rem 0.9375rem;
      border-radius: 0 0 0.625rem 0.625rem;

      .subscribe-make {
        padding: 1rem;
        background-color: #fff;

        .on {
          color: #f14e4e;
        }
      }
    }

    .subscribe-list {
      flex-wrap: wrap;
      margin-bottom: 0.5625rem;

      .subscribe-item {
        width: 33%;
        flex-direction: column;
        position: relative;

        h3 {
          font-size: 0.875rem;
          font-weight: 500;
          color: #202020;
          // margin-bottom: 0.5625rem;
        }

        h4 {
          font-size: 0.75rem;
          font-weight: 400;
          color: #666;
        }

        .icon-ht_more_bottom {
          color: #999;
          font-size: 0.625rem;
          position: absolute;
          right: 1.175rem;
          top: 0.4375rem;
          transition: 0.5s;
          transform: rotate(0deg);
        }

        .overturn {
          transform: rotate(180deg);
        }

        .active-subscribe-box {
          padding: 0.25rem 0.5rem 0 0.5rem !important;
        }

        .subscribe-box {
          width: 5.375rem;
          box-sizing: border-box;
          flex-direction: column;
          padding: 0.25rem 0.5rem;
          border-radius: 0.3125rem;
        }
      }

      .active-subscribe-item::before {
        font-size: 1.2rem !important;
        top: 40% !important;
      }

      .subscribe-item::before {
        content: "/";
        font-size: 1.5rem;
        font-weight: 300;
        color: #bababa;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .subscribe-item:last-child::before {
        content: "";
      }
    }
  }

  .subscribe-bg {
    background-color: #fff1cb;
    // background-color: var(--themeBaseColor);
  }

  .menu-bg {
    width: 23.4375rem;
    position: fixed;
    top: 3.0625rem;
    z-index: 110;
    padding-bottom: 0.3125rem;
    background-image: linear-gradient(#ffc11e, #f5f5f5);
    background-image: var(--themeBgColor);
  }

  .select-address {
    margin: 0 0 0.625rem 0;
    position: relative;

    .active-address-menu {
      padding: 0.4rem 0 0.4rem 0.8125rem !important;
    }

    .address-menu {
      margin: 0 0.625rem;
      padding-bottom: 0.3125rem;
      color: #00a3f9;
      background-color: #fff;
      padding: 0.8125rem 0 0.8125rem 0.8125rem;
      text-align: left;
      z-index: 10;
      position: relative;
      border-radius: 0.3125rem;
      display: flex;

      .icon-service_n {
        font-size: 1.0625rem;
      }

      .icon-member-bottom {
        position: relative;
        display: inline-block;
        transition: 0.5s;
        transform: rotateX(0deg);
      }

      .overturn {
        transform: rotateX(180deg);
      }

      .address {
        margin: 0 0.375rem 0 0.4375rem;
      }
    }

    ul {
      zoom: 1; /* 适用于IE */
    }

    .active-address-list {
      top: 0.25rem !important;
    }

    .address-list {
      width: 23.4375rem;
      height: 0%;
      // visibility: hidden;
      display: none;
      background-color: #fff;
      // display: block;

      /* 将此元素设为不可见 */
      opacity: 0;
      transition: all 0.6s;
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 6;
      background: #fff;
      padding: 1.0625rem 0 1.1875rem 0;
      text-align: left;

      li {
        font-size: 0.8125rem;
        font-weight: 400;
        color: #333;
        padding: 0 0 1.25rem 1.375rem;
        clear: both;
        background-color: #fff;
        cursor: pointer;
      }

      .on {
        color: #f10000;
      }
    }

    .toggle {
      height: 21.875rem;
      overflow-y: scroll;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      opacity: 1;
      transition: all 0.6s;
      // visibility: visible;
      display: block;
    }
  }

  .commodity-list {
    margin: 0 0.625rem;

    .commodity-items {
      background-color: #fff;
      border-radius: 0.3125rem;
      margin-bottom: 0.625rem;
      padding: 0.8125rem;

      .container {
        .image {
          width: 9.375rem;
          // height: 4.6875rem;
          background: #bfbaba;
          border-radius: 0.125rem;
          position: relative;

          .img-footer {
            width: 100%;
            box-sizing: border-box;
            justify-content: flex-end;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 0 0.3125rem 0.25rem 0;

            .distance {
              border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
              padding: 0.3125rem 0.4375rem;
              background-color: rgba(0, 0, 0, 0.5);
              color: #fff;
              font-size: 0.625rem;
              line-height: 0.625rem;

              .icon-service_n {
                padding-right: 0.25rem;
                font-size: 0.875rem;
              }
            }
          }

          img {
            width: 9.375rem;
            height: 100%;
            // height: 4.6875rem;
            border-radius: 0.125rem;
          }
        }

        .img-right {
          padding: 0  0 0 0.625rem;
          flex-direction: column;

          .title {
            font-size: 0.875rem;
            font-weight: bold;
            color: #2c2c2c;
            text-align: left;
            padding: 0  0 0.625rem 0;
          }

          .address {
            text-align: left;
            font-size: 12px;
            color: #313131;
            padding-bottom: 14px;
          }

          .price-item {
            align-items: center;

            .pirce {
              .pirce-const {
                padding: 0 10px 0 0;
                color: #f10000;
                font-size: 1rem;
                line-height: 1rem;
                align-items: flex-end;

                span {
                  font-size: 0.625rem;
                }
              }

              .counter-price {
                font-size: 0.6875rem;
                text-decoration: line-through;
                color: #929292;
              }
            }
          }

          .sales {
            font-size: 0.6875rem;
            line-height: 0.6875rem;
            font-weight: 400;
            color: #929292;
          }
        }
      }

      .footer-comm {
        text-align: left;
        padding: 0.6875rem 0 0 0;

        .goods-desc {
          font-size: 0.6875rem;
          font-weight: 400;
          color: #313131;
          text-align: left;
          // padding-left: 10px;
        }

        .time-end {
          line-height: 0.625rem;
          padding: 0.375rem 0.375rem 0.3125rem 0.4375rem;
          background: #f10000;
          color: #fff;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          display: inline-block;
        }

        .time-end:last-child {
          margin-left: 0.3125rem;
          color: #fff;
          display: inline-block;
        }

        .panic {
          font-size: 10px;
          line-height: 10px;
          padding: 4px 7px;
          display: inline-block;
          color: #fff;
          border-radius: 2px 2px 2px 2px;
          background-color: #11c9a4;
          margin-right: 8px;
        }

        .panic-space {
          width: 10px;
          display: inline-block;
          clear: both;
        }
      }
    }
    // .commodity-item {
    //   border-radius: 0rem 0rem 0.3125rem 0.3125rem;
    //   background-color: #fff;
    //   margin-bottom: 0.625rem;
    //   .image {
    //     width: 22.1875rem;
    //     height: 11.125rem;
    //     position: relative;
    //     .img-footer {
    //       width: 100%;
    //       box-sizing: border-box;
    //       position: absolute;
    //       bottom: 0;
    //       padding: 0 0.5625rem 0.5625rem 0.5625rem;
    //       .distance {
    //         border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    //         padding: 0.3125rem 0.4375rem;
    //         background-color: rgba(0, 0, 0, 0.5);
    //         color: #fff;
    //       }

    //       .img-right {
    //         font-size: 0.625rem;
    //         color: #ffffff;
    //         .panic {
    //           padding: 0.3125rem 0.6875rem;
    //           background: #11c9a4;
    //           border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    //           margin-right: 0.3125rem;
    //         }
    //         .time-end {
    //           line-height: 0.625rem;
    //           padding: 0.375rem 0.375rem 0.3125rem 0.4375rem;
    //           background: #f10000;
    //           border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    //         }
    //         .time-end:last-child {
    //           margin-left: 0.3125rem;
    //         }
    //       }
    //     }

    //     img {
    //       width: 22.1875rem;
    //       height: 11.125rem;
    //       border-radius: 0.3125rem 0.3125rem 0rem 0rem;
    //     }
    //   }
    //   .commodity-footer {
    //     padding: 0.75rem 0.8125rem;
    //     text-align: left;
    //     h3 {
    //       font-size: 0.95rem;
    //       font-weight: bold;
    //       color: #2c2c2c;
    //       // margin-bottom: 0.875rem;
    //     }
    //     .long-title {
    //       font-size: 0.85rem;
    //       color: #818181;
    //       margin: 0.2rem 0;
    //       overflow:hidden;
    //       text-overflow: ellipsis;
    //       -webkit-line-clamp: 2;
    //       display: -webkit-box;
    //       -webkit-box-orient: vertical;
    //     }
    //     .price {
    //       color: #f10000;
    //       font-size: 0.625rem;
    //       margin-right: 0.625rem;
    //       .num {
    //         font-size: 1rem;
    //       }
    //     }
    //     .counter-price {
    //       margin-right: 0.8125rem;
    //     }
    //     .counter-price,
    //     .sales {
    //       font-size: 0.6875rem;
    //       color: #929292;
    //       font-weight: 400;
    //     }
    //   }
    // }
  }

  .activity-10 {
    margin-bottom: 0.625rem;
  }

  .masking {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: none;
  }

  .maskBoxBg {
    display: block;
  }

  .addressConceal {
    display: none;
  }

  .addressopen {
    display: block;
  }
}
</style>
